import React, {useEffect, useRef, useState} from "react";
import {
    Button,
    Input,
    Table,
    Pagination,
    ConfigProvider,
    Space,
    DatePicker,
    Modal,
    Radio,
    message,
    Form,
} from "antd";

import zhCN from "antd/lib/locale/zh_CN";
import "./gongyingshang.css";

import {
    DownOutlined,
    UpOutlined,
} from "@ant-design/icons";
import locale from "antd/lib/date-picker/locale/zh_CN";
import service from "../../../service";
import TextArea from "antd/es/input/TextArea";

export default function Gongyingshang() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisibles, setIsModalVisibles] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };


    const handleCancels = () => {
        setIsModalVisibles(false);
    };
    const {RangePicker} = DatePicker;
    const [attend, setAttend] = useState(false);

    const columns = [{
        title: "合作情况", dataIndex: "cooperation", key: "cooperation", className: "bgColor",
    }, {
        title: "供应商名称", dataIndex: "name", key: "name", className: "bgColor",
    }, {
        title: "联系人", dataIndex: "contact", key: "contact", className: "bgColor",
    }, {
        title: "电话", dataIndex: "landline", key: "landline", className: "bgColor",
    }, {
        title: "手机号", dataIndex: "phone_number", key: "phone_number", className: "bgColor",
    }, {
        title: "QQ", dataIndex: "qqnumber", key: "qqnumber", className: "bgColor",
    }, {
        title: "省份/城市", dataIndex: "city", key: "city", className: "bgColor",
    }, {
        title: "地址", dataIndex: "address", key: "address", className: "bgColor",
    }, {
        title: "备注", dataIndex: "note", key: "note", className: "bgColor",
    }, {
        title: "添加时间", dataIndex: "update_time", key: "update_time", className: "bgColor",
    }, {
        title: "管理", key: "action", className: "bgColor", render: (record) => (<Space size="middle">
            <Button type="primary"  size="small" style={{borderRadius: "5px"}} onClick={() => showUpdateModals(record)}>修改</Button>
            <Button type="primary" danger size="small" style={{borderRadius: "5px"}} onClick={() => handleDelSupplier(record.id)}>删除</Button>
        </Space>),
    },];
    const [supplierList, setSupplierList] = useState([]);
    const [total, setTotal] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const [pageSize, setPageSize] = useState(10);
    const searchMsgRef = useRef(null);//搜索输入框
    const [supplierItem, setSupplierItem] = useState({});//用于存取点击编辑时的这条供应商的数据
    const [form] = Form.useForm();//新增
    const [formUpdate] = Form.useForm();//添加

    //新增供应商
    const handleOk_Add = async () => {
        const fieldsValue = await form.validateFields();
        //fieldsValue即为表单内的值
        console.log("添加供应商的数据", fieldsValue);
        service.writeOffService.ADD_Supplier(fieldsValue).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getSupplierList(currentPage, pageSize)
            } else {
                message.error("添加失败")
            }
        }).catch(err => {
            console.log("添加供应商出错了", err);
        })
        setIsModalVisible(false);
    };
    //编辑供应商
    const handleOk_Update = async () => {
        const fieldsValue = await formUpdate.validateFields();
        //fieldsValue即为表单内的值
        console.log("编辑", fieldsValue.msg);
        service.writeOffService.UPDATE_Supplier(supplierItem.id, fieldsValue.msg).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getSupplierList(currentPage, pageSize)
            } else {
                message.error("编辑失败")
            }
        }).catch(err => {
            console.log("编辑---供应商出错了", err);
        })
        setIsModalVisibles(false);
    };
    //展示编辑弹窗
    const showUpdateModals = (record) => {
        setIsModalVisibles(true);
        setSupplierItem(record);
        formUpdate.setFieldsValue({msg: record})
    };
    //根据用户条件进行搜索
    const searchByUserInput = () => {
        const inputValue = searchMsgRef.current.input.value;
        service.writeOffService.SEARCH_Supplier_ByInput(currentPage, pageSize, inputValue).then(data => {
            console.log(data);
            if (data.code === 200) {
                setSupplierList(data.data);
            } else {
                message.error("搜索失败，请稍后再试")
            }
        }).catch(err => {
            console.log("供应商搜索出错啦", err);
        })
    }
    //删除供应商
    const handleDelSupplier = (id) => {
        console.log(id);
        service.writeOffService.DEL_Supplier(id).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getSupplierList(currentPage, pageSize)
            } else {
                message.error("删除失败")
            }
        }).catch(err => {
            console.log("删除供应商列表出错了", err);
        })
    }
    //获取供应商列表
    const getSupplierList = (currentPage, pageSize) => {
        service.writeOffService.GER_SupplierList(currentPage, pageSize).then(data => {
            console.log("供应商列表", data);
            setTotal(data.count);
            setSupplierList(data.data)
        }).catch(err => {
            console.log("供应商列表出错了", err);
        })
    }
    //获取页码和每页展示条数
    const changePage_size = (page, size) => {
        setCurrentPage(page);
        setPageSize(size)
    }
    useEffect(() => {
        getSupplierList(currentPage, pageSize)
    }, [currentPage, pageSize])

    return (<div>
        <div className="gybutton">
            <Button type="primary" className="sysp">
                供应商列表
            </Button>
            <Button type="primary" className="xzsp" onClick={showModal}>
                新增供应商
            </Button>
            <div className="right">
                <Input
                    type="text"
                    className="input"
                    placeholder="供货商、联系人、手机号"
                    ref={searchMsgRef}
                />
                <Button type="primary" onClick={searchByUserInput} size="small" className="search sou">
                    搜索
                </Button>
                <Button
                    type="primary"
                    size="small"
                    className="highSearch"
                    onClick={() => {
                        setAttend(!attend);
                    }}
                >
                    高级搜索 {attend ? <UpOutlined/> : <DownOutlined/>}
                </Button>
            </div>
            {!attend ? null : (<>
                <div id="heighSearch">
                    <div className="left">
                        <ul>
                            <li>
                                <span>合作情况</span>
                                <span>
                      <select value="1">
                        <option value="1">请选择</option>
                        <option value="2">合作</option>
                        <option value="3">未合作</option>
                      </select>
                    </span>
                            </li>
                            <li>
                                <span>电话</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>微信</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>网址</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>添加时间</span>
                                <span>
                      <Space direction="vertical" size={12}>
                        <RangePicker
                            locale={locale}
                            size="small"
                            className="rpss"
                        />
                      </Space>
                    </span>
                            </li>
                        </ul>
                    </div>
                    <div className="middle">
                        <ul>
                            <li>
                                <span>供应商名称</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>传真</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>QQ</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>省份</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                        </ul>
                    </div>
                    <div className="right">
                        <ul>
                            <li>
                                <span>联系人</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>手机号</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>邮箱</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                            <li>
                                <span>城市</span>
                                <span>
                      <input type="text"/>
                    </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className="btnitem">
                    <button>立即搜索</button>
                    <button>清空条件</button>
                </div>
            </>)}
        </div>
        <Table columns={columns} rowKey={record => record.id} dataSource={supplierList} pagination={false}/>
        <ConfigProvider locale={zhCN}>
            <Pagination
                className="GetPages"
                total={total}
                showSizeChanger
                showQuickJumper
                onChange={changePage_size}
                showTotal={(total) => `总共 ${Math.ceil(total/pageSize)} 页`}
            />
        </ConfigProvider>
        <Modal
            title="新增供应商"
            visible={isModalVisible}
            onOk={handleOk_Add}
            onCancel={handleCancel}
            className="gyszz"
        > <Form
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 14,
            }}
            form={form}
            layout="horizontal"

        >
            <Form.Item label="合作情况" name="status" rules={[
                {
                    required: true,
                    message: '请输入合作情况',
                },
            ]}>
                <Radio.Group>
                    <Radio value="1"> 已合作 </Radio>
                    <Radio value="0"> 未合作 </Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item label="供应商名称" name="name" rules={[
                {
                    required: true,
                    message: '请输入供应商名称',
                },
            ]}>
                <Input/>
            </Form.Item>
            <Form.Item label="联系人" name="contact" rules={[
                {
                    required: true,
                    message: '请输入联系人',
                },
            ]}>
                <Input/>
            </Form.Item>
            <Form.Item label="电话" name="landline">
                <Input/>
            </Form.Item>
            <Form.Item label="传真" name="fax">
                <Input/>
            </Form.Item>
            <Form.Item label="手机号" name="phone_number"
                       rules={[
                           {
                               required: true,
                               message: '请输入手机号',
                           },
                       ]}>
                <Input/>
            </Form.Item>
            <Form.Item label="微信号" name="wechatid">
                <Input/>
            </Form.Item>
            <Form.Item label="QQ" name="qqnumber">
                <Input/>
            </Form.Item>
            <Form.Item label="邮件" name="email">
                <Input/>
            </Form.Item>
            <Form.Item label="网址" name="url">
                <Input/>
            </Form.Item>
            <Form.Item label="省" name="address">
                <Input/>
            </Form.Item>
            <Form.Item label="市" name="city">
                <Input/>
            </Form.Item>
            <Form.Item label="备注" name="note">
                <TextArea rows={4}/>
            </Form.Item>
        </Form>
        </Modal>
        <Modal
            title="修改供应商"
            visible={isModalVisibles}
            onOk={handleOk_Update}
            onCancel={handleCancels}
            className="gyszz"
        >
            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                form={formUpdate}
                layout="horizontal"

            >
                <Form.Item label="合作情况" name={["msg", "status"]} rules={[
                    {
                        required: true,
                        message: '请输入合作情况',
                    },
                ]}>
                    <Radio.Group>
                        <Radio value="1"> 已合作 </Radio>
                        <Radio value="0"> 未合作 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="供应商名称" name={["msg", "name"]} rules={[
                    {
                        required: true,
                        message: '请输入供应商名称',
                    },
                ]}>
                    <Input value={supplierItem.contact}/>
                </Form.Item>
                <Form.Item label="联系人" name={["msg", "contact"]} rules={[
                    {
                        required: true,
                        message: '请输入联系人',
                    },
                ]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="电话" name={["msg", "landline"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="传真" name={["msg", "fax"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="手机号" name={["msg", "phone_number"]}
                           rules={[
                               {
                                   required: true,
                                   message: '请输入手机号',
                               },
                           ]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="微信号" name={["msg", "wechatid"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="QQ" name={["msg", "qqnumber"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="邮件" name={["msg", "email"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="网址" name={["msg", "url"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="省" name={["msg", "address"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="市" name={["msg", "city"]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="备注" name={["msg", "note"]}>
                    <TextArea rows={4}/>
                </Form.Item>
            </Form>
        </Modal>
    </div>);
}
